<template>
  <div id="index">
    <div class="msgBox" :style="{'display': msgBoxDisplay}">
      <span class="score">{{answerDetail.score}}分</span>
      <br style="width: 0;height: 0"/>
      <span class="msgBoxText">本次答题获得</span>
      <button class="answerDetail" @click="lookDetail">答题详情</button>
      <button class="answerAgain" @click="answerAgain">再答一次</button>
    </div>
    <div class="info">
      <div class="progressBar">
        <span class="number">{{number}}</span>
        <div class="circle-progressBar">
          <div class="wrapper left">
            <div class="circle-bar" :style="{'transform':('rotate('+leftCircleBar+'deg)')}" ></div>
          </div>
          <div class="wrapper right">
            <div class="circle-bar" :style="{'transform':('rotate('+rightCircleBar+'deg)')}"></div>
          </div>
        </div>
      </div>
      <span class="question">{{problem.problem}}</span>
      <div class="options">
        <button
          class="btn"
          @click="NextQuestion(problem.firstOption,1)"
          :style="{
          'pointer-events':Disable,
          'box-shadow':firstOption.boxShadow,
          'z-index':firstOption.zIndex}">
          {{problem.firstOption}}
        </button>
        <button
          class="btn"
          @click="NextQuestion(problem.secondOption,2)"
          :style="{
          'pointer-events':Disable,
          'box-shadow':secondOption.boxShadow,
          'z-index':secondOption.zIndex}">
          {{problem.secondOption}}
        </button>
        <button
          class="btn"
          @click="NextQuestion(problem.thirdOption,3)"
          :style="{
          'pointer-events':Disable,
          'box-shadow':thirdOption.boxShadow,
          'z-index':thirdOption.zIndex}">
          {{problem.thirdOption}}
        </button>
        <button
          class="btn"
          @click="NextQuestion(problem.fourthOption,4)"
          :style="{
          'pointer-events':Disable,
          'box-shadow':fourthOption.boxShadow,
          'z-index':fourthOption.zIndex}">
          {{problem.fourthOption}}
        </button>
      </div>
      <!--<div class="msgBox" :style="{'display': TipsDisplay}">-->
        <!--<span>回答错误</span>-->
        <!--<br style="width: 0;height: 0"/>-->
        <!--<span>&nbsp;&nbsp;正确的答案应为：{{problem.answer}}</span>-->
        <!--<button>下一题</button>-->
        <!--<span>3秒后自动下一题</span>-->
      <!--</div>-->
      <div class="text" :style="{'display': textDisplay}">
        &nbsp;&nbsp;选错了，正确的答案应为：{{problem.answer}}
      </div>
      <div class="BNQuestion">
        <button class="backQuestion" @click="backProblem" :style="{'display': backQuestionDisplay}">上一题</button>
        <button class="nextQuestion" @click="nextProblem" :style="{'display': nextQuestionDisplay}">{{nextQuestion}}</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        answerDetail:{
          score:100,
          details:[
            {
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },{
              key:'',
              answer:'',
              situation:''
            },
          ]
        },
        firstOption:{
          boxShadow:'',
          zIndex:0,
        },
        secondOption:{
          boxShadow:'',
          zIndex:0,
        },
        thirdOption:{
          boxShadow:'',
          zIndex:0,
        },
        fourthOption:{
          boxShadow:'',
          zIndex:0,
        },
        judge:'false',
        TipsDisplay:'none',
        Disable:'auto',
        nextQuestion:'下一题',
        msgBoxDisplay:'none',
        backQuestionDisplay:'none',
        nextQuestionDisplay:'none',
        textDisplay:'none',
        Info:[],
        questions:[],
        problem:{},
        index:0,
        leftCircleBar: 45,
        rightCircleBar: 45,
        totalNumber: 0,
        number: 0,
        percent: 0,
        totalPercent:0,
        score:100,
      }
    },
    methods:{
      CircleProgressBar(){
        if(this.number>0){
          this.number = this.number-1;
          if(this.totalPercent < 180){
            this.totalPercent = this.totalPercent + this.percent;
            if(this.totalPercent >180){
              this.leftCircleBar = this.leftCircleBar + this.totalPercent - 180;
              this.rightCircleBar = 225;
            }
            else {
              this.rightCircleBar = this.rightCircleBar + this.percent;
            }
          }
          else{
            if(this.totalPercent < 360){
              this.totalPercent = this.totalPercent + this.percent;
              this.leftCircleBar = this.leftCircleBar + this.percent;
            }
          }
        }
      },
      NextQuestion(answer,key){
        if(answer === this.problem.answer){
          this.answerDetail.details[this.index].answer = this.problem.answer;
          this.answerDetail.details[this.index].key = key;
          this.answerDetail.details[this.index].situation = 'true';
          this.index = this.index+1;
          console.log("这是正确答案");
          this.CircleProgressBar();
          if(this.index < this.totalNumber){
            this.problem = this.questions[this.index];
          }else{
            wx.setStorage({
              key: this.Info.key,
              data: this.answerDetail,
              success() {
                console.log('成功')
              },
              fail(){
                console.log('存储失败')
              }
            });
            this.msgBoxDisplay = 'block';
            console.log("全部回答完了")
          }
        } else{
          this.answerDetail.details[this.index].answer = answer;
          this.answerDetail.details[this.index].key = key;
          this.answerDetail.details[this.index].situation = 'false';
          this.answerDetail.score = this.answerDetail.score-(100/this.totalNumber);
          if(this.index === (this.totalNumber-1)){
            wx.setStorage({
              key: this.Info.key,
              data: this.answerDetail,
              success() {
                console.log('存储成功')
              },
              fail(){
                console.log('存储失败')
              }
            });
            this.nextQuestion = "结束答题";
            console.log("结束答题出现了")
          }
          if(key === 1){
            this.firstOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.firstOption.zIndex = 1;
          }
          if(key === 2){
            this.secondOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.secondOption.zIndex = 1;
          }
          if(key === 3){
            this.thirdOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.thirdOption.zIndex = 1;
          }
          if(key === 4){
            this.fourthOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.fourthOption.zIndex = 1;
          }
          this.Disable = 'none';
          this.textDisplay = 'block';
          this.nextQuestionDisplay = 'block';
          console.log("回答错误！！！")
        }
      },
      nextProblem(){
        this.firstOption.boxShadow = '';
        this.firstOption.zIndex = 0;
        this.secondOption.boxShadow = '';
        this.secondOption.zIndex = 0;
        this.thirdOption.boxShadow = '';
        this.thirdOption.zIndex = 0;
        this.fourthOption.boxShadow = '';
        this.fourthOption.zIndex = 0;
        this.textDisplay = 'none';
        if(this.judge === 'true'){
          this.index = this.index+1;
          this.CircleProgressBar();
          if(this.index === (this.totalNumber-1)){
            this.nextQuestion = "结束查看";
          }
          if(this.index < this.totalNumber){
            this.problem = this.questions[this.index];
          }else {
            this.msgBoxDisplay = 'block';
            console.log('你点击了结束答题')
          }
          if(this.answerDetail.details[this.index].key === 1){
            this.firstOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.firstOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 2){
            this.secondOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.secondOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 3){
            this.thirdOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.thirdOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 4){
            this.fourthOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.fourthOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].situation === "false"){
            this.textDisplay = 'block';
          }
        }
        else{
          this.index = this.index+1;
          this.CircleProgressBar();
          this.Disable = 'auto';
          this.nextQuestionDisplay = 'none';
          if(this.index < this.totalNumber){
            this.problem = this.questions[this.index];
          }else {
            this.msgBoxDisplay = 'block';
            console.log('你点击了结束答题')
          }
        }
      },
      backProblem(){
        if(this.index > 0){
          this.index = this.index-1;
          if(this.number<this.totalNumber){
            this.number = this.number+1;
            if(this.totalPercent > 180){
              this.totalPercent = this.totalPercent - this.percent;
              if(this.totalPercent < 180){
                this.leftCircleBar = 45;
                this.rightCircleBar = this.rightCircleBar + this.totalPercent - 180;
              }
              else {
                this.leftCircleBar = this.leftCircleBar - this.percent;
              }
            }
            else{
              if(this.totalPercent > 0){
                this.totalPercent = this.totalPercent - this.percent;
                this.rightCircleBar = this.rightCircleBar - this.percent;
              }
            }
          }
          this.nextQuestion = "下一题";
          this.problem = this.questions[this.index];
          this.firstOption.boxShadow = '';
          this.firstOption.zIndex = 0;
          this.secondOption.boxShadow = '';
          this.secondOption.zIndex = 0;
          this.thirdOption.boxShadow = '';
          this.thirdOption.zIndex = 0;
          this.fourthOption.boxShadow = '';
          this.fourthOption.zIndex = 0;
          this.textDisplay = 'none';
          if(this.answerDetail.details[this.index].key === 1){
            this.firstOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.firstOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 2){
            this.secondOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.secondOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 3){
            this.thirdOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.thirdOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].key === 4){
            this.fourthOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
            this.fourthOption.zIndex = 1;
          }
          if(this.answerDetail.details[this.index].situation === "false"){
            this.textDisplay = 'block';
          }
        }
      },
      answerAgain(){
        try {
          wx.clearStorageSync()
        } catch(e) {
          // Do something when catch error
        }
        wx.redirectTo({
          url: '/pages/answerDetail/main?questionItem=' + JSON.stringify(this.Info)
        });
      },
      lookDetail(){
        Object.assign(this.$data, this.$options.data());
        this.Info = JSON.parse(this.$mp.query.questionItem);
        this.number = this.Info.number;
        this.totalNumber = this.Info.number;
        this.questions = this.Info.questions;
        this.problem = this.questions[this.index];
        this.percent = 360/this.totalNumber;
        try {
          let value = wx.getStorageSync(this.Info.key);
          if (value) {
            this.answerDetail = value;
            this.judge = 'true'
          }
        } catch (e) {
          this.judge = 'false'
        }
        this.Disable = 'none';
        this.nextQuestionDisplay = 'block';
        this.backQuestionDisplay = 'block';
        if(this.answerDetail.details[0].key === 1){
          this.firstOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
          this.firstOption.zIndex = 1;
        }
        if(this.answerDetail.details[0].key === 2){
          this.secondOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
          this.secondOption.zIndex = 1;
        }
        if(this.answerDetail.details[0].key === 3){
          this.thirdOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
          this.thirdOption.zIndex = 1;
        }
        if(this.answerDetail.details[0].key === 4){
          this.fourthOption.boxShadow = '0 0 10rem 10rem rgb(235,45,33,0.5)';
          this.fourthOption.zIndex = 1;
        }
        if(this.answerDetail.details[0].situation === "false"){
          this.textDisplay = 'block';
        }
      }
    },
    mounted(){
      Object.assign(this.$data, this.$options.data());
      //动态修改页面标题
      wx.setNavigationBarTitle({
        title: "每日答题",
      });
      this.Info = JSON.parse(this.$mp.query.questionItem);
      this.number = this.Info.number;
      this.totalNumber = this.Info.number;
      this.questions = this.Info.questions;
      this.problem = this.questions[this.index];
      this.percent = 360/this.totalNumber;
      try {
        let value = wx.getStorageSync(this.Info.key);
        if (value) {
          this.answerDetail = value;
          console.log(this.answerDetail);
          this.judge = 'true'
        }
      } catch (e) {
        this.judge = 'false'
      }
      console.log(this.judge);
      if(this.judge === 'true'){
        this.msgBoxDisplay = 'block';
        // Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>

<style scoped>
  #index{
    position: relative;
    background: #eb2d21;
    height: 100%;
    width: 100%;
  }
  .msgBox{
    box-shadow: 0 0 10rem 10rem rgb(235,45,33,0.5);
    position: absolute;
    margin-left: 1.39rem;
    margin-top: 2.2rem;
    z-index: 3;
    background: #f1f1f1;
    width: 63%;
    height: 5rem;
    border-radius: 10px;
  }
  .score{
    color: red;
    font-weight: bold;
    margin-left: 1.63rem;
    font-size: 0.6rem;
    line-height: 1.5rem;
    text-align: center;
  }
  .msgBoxText{
    font-weight: bold;
    margin-left: 1.52rem;
    text-align: center;
  }
  .answerDetail{
    color: #e2e2e2;
    background: #ff5a39;
    font-size: 0.3rem;
    text-align: center;
    height: 0.76rem;
    width: 80%;
    margin-top: 0.4rem;
  }
  .answerAgain{
    color: #e2e2e2;
    background: #ff5a39;
    font-size: 0.3rem;
    text-align: center;
    height: 0.76rem;
    width: 80%;
    margin-top: 0.4rem;
  }


  .info{
    display: flex;
    flex-direction: column;
  }
  .progressBar{
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.3rem;
    margin-bottom: 0.25rem;
    width: 1.4rem;
    height: 1.4rem;
  }
  .circle-progressBar{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .circle-progressBar div{
    box-sizing: border-box;
  }
  .wrapper{
    position: absolute;
    width: 0.7rem;
    height: 1.4rem;
    overflow: hidden;
  }
  .left{
    left: 0;
  }
  .right{
    right: 0;
  }
  .circle-bar{
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    border: 16px solid white;
    border-radius: 50%;
  }
  .left .circle-bar{
    left: 0;
    border-left-color: #eeac58;
    border-bottom-color: #eeac58;
  }
  .right .circle-bar{
    right: 0;
    border-right-color: #eeac58;
    border-top-color: #eeac58;
  }
  .number{
    position: absolute;
    text-align: center;
    line-height: 1.4rem;
    width: 1.4rem;
    color: white;
    font-size: 0.43rem;
  }

  .question{
    z-index: 2;
    color: #f4dcd9;
    font-size: 0.33rem;
    height: min-content;
    width: 90%;
    margin: 0 auto;
    line-height: 0.5rem;
    font-family: 宋体;
  }
  .options{
    margin-top: 0.5rem;
    width: 90%;
    height: min-content;
    margin-left: auto;
    margin-right: auto;
  }
  .text{
    box-shadow: 0 0 10rem 10rem rgb(235,45,33,0.2);
    z-index: 1;
    border: white solid 1px;
    padding: 0.3rem;
    color: white;
    width: 90%;
    height: min-content;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0.2rem;
  }
  .btn{
    font-size: 0.33rem;
    text-align: center;
    color: #eb2d21;
    width: 100%;
    height: 1rem;
    margin-bottom: 0.3rem;
    border-radius: 0.5rem;
  }
  .BNQuestion{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 0.7rem;
  }
  .backQuestion{
    z-index: 1;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.7rem;
    background: #ffffff;
    color: #6e82d9;
    width: 2rem;
    margin-right: 0.3rem;
  }
  .nextQuestion{
    z-index: 1;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.7rem;
    background: #ffffff;
    color: #6e82d9;
    width: 2rem;
    margin-right: 1rem;
  }
</style>
